<template>
  <div>
    <el-breadcrumb
      style="margin: 5px 0px 0px 30px"
      separator-class="el-icon-arrow-right"
    >
      <!-- <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item> -->
      <el-breadcrumb-item :to="{ path: '/userInformation' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>店铺管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品上传</el-breadcrumb-item>
    </el-breadcrumb>
    <ul class="shopList">
      <li>
        <b>商品类别</b
        ><select v-model="changeFol">
          <option v-for="item in foList" :key="item.foId" :value="item.foname" >
            {{ item.foname }}
          </option>
        </select>
      </li>
      <li>
        <b>商品名称</b
        ><input type="text" placeholder="请输入商品名称" v-model="goodsName" style="text-align:center;"/>
      </li>
      <li>
        <b>商品描述</b
        ><textarea
          placeholder="请输入商品描述"
          cols="30"
          rows="10"
          v-model="describe"
          style="text-align:center;font-family:Arial;"
        ></textarea>
      </li>
      <li>
        <b>商品原价</b
        ><input type="text" v-model="oPrice" placeholder="请输入价格" style="text-align:center;"/>
      </li>
      <li>
        <b>商品现价</b
        ><input type="text" v-model="pPrice" placeholder="请输入价格" style="text-align:center;"/>
      </li>

      <li>
        <b>起拼数量</b
        ><input type="text" v-model="spellNum" placeholder="请输入起拼数量" style="text-align:center;"/>
      </li>
      <li>
        <b>商品总量</b
        ><input
          type="text"
          v-model="goodsNum"
          placeholder="请输入商品库存总量"
          style="text-align:center;"
        />
      </li>
      <li>
        <b>销量个数</b
        ><input type="text" v-model="Sales" placeholder="请输入总销量" style="text-align:center;"/>
      </li>
      <li style="widht: 486px">
        <button style="position: relative">
          <span style="position: absolute; left: 75px; top: 5px">上传图片</span
          ><input
            id="inFile"
            @change="uploadImg"
            style="opacity: 0; height: 100%; width: 100%"
            type="file"
            multiple
          />
        </button>
      </li>
      <li class="liImg"></li>
      <li><button @click="submit">提交</button></li>
    </ul>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      user: {},
      foList: [],
      changeFol: null,
      goodsName: "",
      describe: "",
      oPrice: "",
      pPrice: "",
      spellNum: "",
      goodsNum: "",
      Sales: "",
      form: new FormData(),
      imgArr: [],
      i: 0,
    };
  },
  created() {
    this.getShopMessage();
  },
  mounted() {},
  watch: {
    foList() {
      this.setSelect();
    },
  },
  methods: {
    // 提示
    open2() {
      this.$message({
        message: "添加成功！",
        type: "success",
      });
    },
    open1() {
      this.$notify.info({
        title: "信息不能为空！",
        message: "这是一条消息的提示消息",
      });
    },
    open3() {
      this.$notify.info({
        title: "请上传至少一张图片！",
        message: "这是一条消息的提示消息",
      });
    },
    open4() {
      this.$notify.error({
        title: "上传失败请稍后重试！",
        message: "这是一条错误的提示消息",
      });
    },
    // 初次选项
    setSelect() {
      this.changeFol = this.foList[0].foname;
    },
    // 得到user
    getShopMessage() {
      let that = this;
      this.user = JSON.parse(window.sessionStorage.getItem("user"));
      let userId = this.user.userId;
      let userToken = this.user.token;
      this.$http
        .get(
          "FoodWeb/getFoListAction.action",
          { params: { userid: userId, token: userToken } },
          { dataType: "json" }
        )
        .then((res) => (that.foList = res.data.foList.reverse()));
    },
    // 点击上传图片，保存在arr中
    uploadImg() {
      
      let childLi = document.getElementsByClassName("liImg")[0];
      let file = document.getElementById("inFile");

      for (let i = 0; i < file.files.length; i++) {
        this.imgArr.push(document.getElementById("inFile").files[i]);
        let li = document.createElement("li");
        // 显示图片
        let fr = new FileReader();
        fr.readAsDataURL(file.files[i]);
        fr.onload = function (e) {
          li.innerHTML = "<img src=" + e.target.result + ' alt="">';
        };
       childLi.append(li);
      }
      this.form.append("file", document.getElementById("inFile"));
    },
    // 上传方法
    uploadData() {
      let that = this;
      let i = this.i;
      this.form.delete("upload");
      this.form.append("upload", this.imgArr[i]);
      this.form.set("piccnt", this.i);
      that.$http
        .post("FoodWeb/uploadFood2Action.action", that.form, {
          headers: { "content-type": "multipart/form-data" },
        })
        .then((res) => {
          if (res.data.errorcode == 0) {
            i++;
            this.i = i;
            if (i < this.imgArr.length) {
              that.uploadData();
            } else {
              this.i = 0;
              that.open2();
              setTimeout(() => {
                location.reload();
              }, 2000);
              return;
            }
          } else {
            that.open4();
          }
        });
    },
    submit() {
      // 参数append进formdata中
      let that = this;
      var date = new Date(); // 获取当前时间
      var time = moment(date).format("yyyyMMddHHmmss");
      var i = Math.random() * (999999 - 100000) + 100000;
      var j = parseInt(i, 10);
      var xcsn = "1" + time + j;
      // 初始值
      this.form.append("foodname", "");
      this.form.append("foodtypename", "");
      this.form.append("fooddescription", "");
      this.form.append("validopt", "");
      this.form.append("xcsn", "");
      this.form.append("picnum", "");
      this.form.append("piccnt", "");
      this.form.append("foodprice", "");
      this.form.append("foodprice1", "");
      this.form.append("pinnum", "");
      this.form.append("num", "");
      this.form.append("xiaoliang", "");
      this.form.append("userid", "");
      this.form.append("token", "");
      // 修改值
      this.form.set("foodname", this.goodsName);
      this.form.set("foodtypename", this.changeFol);
      this.form.set("fooddescription", this.describe);
      this.form.set("validopt", 1);
      this.form.set("xcsn", xcsn);
      this.form.set("picnum", 2);
      this.form.set("foodprice", this.oPrice);
      this.form.set("foodprice1", this.pPrice);
      this.form.set("pinnum", this.spellNum);
      this.form.set("num", this.goodsNum);
      this.form.set("xiaoliang", this.Sales);
      this.form.set("userid", this.user.userId);
      this.form.set("token", this.user.token);
      // 判断值
      if (
        this.form.get("foodname") &&
        this.form.get("foodtypename") &&
        this.form.get("fooddescription") &&
        this.form.get("foodprice") &&
        this.form.get("foodprice1") &&
        this.form.get("pinnum") &&
        this.form.get("num") &&
        this.form.get("xiaoliang")
      ) {
        if (this.imgArr.length != 0) {
          this.uploadData(this.i);
        } else {
          this.open3();
        }
      } else {
        this.open1();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.shopList {
  display: flex;
  width: 600px;
  flex-direction: column;
  list-style: none;
  margin: 70px auto 0px;
  li {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    input {
      width: 300px;
      height: 30px;
    }
    select {
      width: 308px;
      height: 36px;
    }
    textarea {
      // text-indent: 2em;
      width: 302px;
      resize: none;
    }
    button {
      margin: 0px auto;
      width: 200px;
      height: 35px;
      background-color: #e31939;
      border-radius: 0.4em;
      border-color: rgb(207, 1, 1);
      color: white;
      font-weight: inherit;
    }
    
  }

  // li:nth-of-type(odd) {
  //   background-color: #f8f8f8;
  // }
}
.liImg{
      display: flex;
      flex-direction: column;
     width: 100%;
      overflow: hidden;
      li{
        width: 100%;
      }
    }
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
